<!--<template>

  <el-main>
    &lt;!&ndash;新增按钮&ndash;&gt;
    <el-button type="success" size="small" @click="openAddWindow" icon="el-icon-plus" >新增</el-button>
    &lt;!&ndash;数据表格&ndash;&gt;
    <el-table
      :data="menuList"
      height="tableHeight"
      style="width: 100%;margin-top: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children'}"
    >
      <el-table-column prop="label" label="菜单名称"></el-table-column>
      <el-table-column prop="type" label="菜单类型" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type == '0'" size="normal">目录</el-tag>
          <el-tag type="success" v-else-if="scope.row.type == '1'" size="normal"> 菜单</el-tag>
          <el-tag type="warning" v-else-if="scope.row.type == '2'" size="normal"> 按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="icon" label="菜单图标" align="center">
        <template slot-scope="scope">
          <i :class="scope.row.icon" v-if="scope.row.icon.includes('el-icon')" ></i>
          <svg-icon v-else :icon-class="scope.row.icon"></svg-icon>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="路由名称"></el-table-column>
      <el-table-column prop="path" label="路由地址"></el-table-column>
      <el-table-column prop="url" label="组件地址"></el-table-column>
      <el-table-column label="操作" align="center"></el-table-column>


    </el-table>

  </el-main>
</template>-->

<template>
  <el-main>
    <!-- 新增按钮 -->
    <el-button type="success" size="small" @click="openAddWindow" icon="el-icon-plus" >新增</el-button>
    <!-- 数据表格 -->
    <!--<el-table
      style=" width: 100%;margin-top: 10px"
      :height="tableHeight"
      :data="menuList"
      row-key="id"
      default-expand-all
      :tree-props="{ children: 'children' }"
      :border="true"
      stripe
    >
      <el-table-column prop="label" label="菜单名称"></el-table-column>
      <el-table-column prop="type" label="菜单类型" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type == '0'" size="normal">目录</el-tag>
          <el-tag type="success" v-else-if="scope.row.type == '1'" size="normal"> 菜单</el-tag>
          <el-tag type="warning" v-else-if="scope.row.type == '2'" size="normal"> 按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="icon" label="菜单图标" align="center">
        <template slot-scope="scope">
          <i :class="scope.row.icon" v-if="scope.row.icon.includes('el-icon')" ></i>
          <svg-icon v-else :icon-class="scope.row.icon"></svg-icon>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="路由名称"></el-table-column>
      <el-table-column prop="path" label="路由地址"></el-table-column>
      <el-table-column prop="url" label="组件路径"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="small" @click="editMenu(scope.row)" >编辑 </el-button >
          <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteMenu(scope.row)" >删除 </el-button >
        </template>
      </el-table-column>
    </el-table>-->
    <el-table
      :data="menuList"
      height="tableHeight"
      style="width: 100%;margin-top: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children'}"
    >
      <el-table-column prop="label" label="菜单名称"></el-table-column>
      <el-table-column prop="type" label="菜单类型" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type == '0'" size="normal">目录</el-tag>
          <el-tag type="success" v-else-if="scope.row.type == '1'" size="normal"> 菜单</el-tag>
          <el-tag type="warning" v-else-if="scope.row.type == '2'" size="normal"> 按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="icon" label="菜单图标" align="center">
        <template slot-scope="scope">
          <i :class="scope.row.icon" v-if="scope.row.icon.includes('el-icon')" ></i>
          <svg-icon v-else :icon-class="scope.row.icon"></svg-icon>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="路由名称"></el-table-column>
      <el-table-column prop="path" label="路由地址"></el-table-column>
      <el-table-column prop="url" label="组件地址"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="small" @click="editMenu(scope.row)" >编辑 </el-button >
          <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteMenu(scope.row)" >删除 </el-button >
        </template>
      </el-table-column>


    </el-table>

    <!--新增或修改窗口-->
    <system-dialog
      :title="menuDialog.title"
      :width="menuDialog.width"
      :height="menuDialog.height"
      :visible="menuDialog.visible"
      @onClose="onClose()"
      @onConfirm="onConfirm()"
    >
      <div slot="content">
        <el-form
          :model="menu"
          ref="menuForm"
          :rules="rules"
          label-width="80px"
          :inline="true"
          size="small"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item prop="type" label="菜单类型">
                <el-radio-group v-model="menu.type">
                  <el-radio :label="0">目录</el-radio>
                  <el-radio :label="1">菜单</el-radio>
                  <el-radio :label="2">按钮</el-radio>
                </el-radio-group> </el-form-item>
            </el-col>
          </el-row>
          <el-form-item prop="parentName" size="small" label="所属菜单">
            <el-input
              v-model="menu.parentName"
              :readonly="true" >
            </el-input>
          </el-form-item>
          <el-form-item prop="label" size="small" label="菜单名称">
            <el-input v-model="menu.label"></el-input>
          </el-form-item>
          <el-form-item size="small" label="菜单图标">
            <el-input v-model="menu.icon"></el-input>
          </el-form-item>
          <el-form-item
            prop="name"
            v-if="menu.type == 1"
            size="small"
            label="路由名称"
          >
            <el-input v-model="menu.name"></el-input>
          </el-form-item>
          <el-form-item
            prop="path"
            v-if="menu.type != 2"
            size="small"
            label="路由地址"
          >
            <el-input v-model="menu.path"></el-input>
          </el-form-item>
          <el-form-item
            prop="url"
            v-if="menu.type == 1"
            size="small"
            label="组件路径" >
            <el-input v-model="menu.url"></el-input>
          </el-form-item>
          <el-form-item prop="code" size="small" label="权限字段">
            <el-input v-model="menu.code"></el-input>
          </el-form-item>
          <el-form-item size="small" label="菜单序号">
            <el-input v-model="menu.orderNum"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </system-dialog>


  </el-main>
</template>


<script>
    //导入menu.js脚本代码
    import menuApi from '@/api/menu';
    //导入对话框组件
    import SystemDialog from '@/components/system/SystemDialog.vue';

    export default {
        name: "menuList",
        components: {
            // 注册组件
            SystemDialog,
        },

        data() {
            return {
                menuList: [], //数据列表
                tableHeight: 0, //表格高度
                menuDialog: {
                    title: "",
                    width: 630,
                    height: 270,
                    visible: false,
                },
                //菜单属性
                menu: {
                    id: "",
                    type: "",
                    parentId: "",
                    parentName: "",
                    label: "",
                    icon: "",
                    name: "",
                    path: "",
                    url: "",
                    code: "",
                    orderNum: "",
                },
                rules: {
                    type: [{ required: true, trigger: "change", message: "请选择菜单类型" }],
                    parentName: [{ required: true, trigger: "change", message: "请选择所属菜单"
                    }],
                    label: [{ required: true, trigger: "blur", message: "请输入菜单名称" }],
                    name: [{ required: true, trigger: "blur", message: "请输入路由名称" }],
                    path: [{ required: true, trigger: "blur", message: "请输入路由路径" }],
                    url: [{ required: true, trigger: "blur", message: "请输入组件路径" }],
                    code: [{ required: true, trigger: "blur", message: "请输入权限字段" }],
                },
            };
        },
        // 初始化时调用
        created() {
            // 查询菜单列表
            this.search()

        },


        methods: {
            /**
             * 查询菜单列表
             * @returns {Promise<void>}
             */
            async search() {
                // 发送查询请求
                let res = await menuApi.getMenuList()
                // 判断是否成功
                if (res.success) {
                    this.menuList = res.data
                }

            },

            // 打开新增窗口
            openAddWindow() {
                // 设置窗口标题
                this.menuDialog.title = "新增菜单"
                // 显示窗口
                this.menuDialog.visible = true
            },

            // 编辑菜单
            editMenu(row) {

            },
            // 删除菜单
            deleteMenu(row) {

            },

            mounted() {
                this.$nextTick(() => {
                    this.tableHeight = window.innerHeight - 180
                });
            },

            // 关闭取消按钮点击事件
            onClose() {
                // 关闭窗口
                this.menuDialog.visible = false

            },
            // 确认按钮点击事件
            onConfirm() {
                // 表单验证
                this.$refs.menuForm.validate((valid) => {
                    if (valid) {
                        // 关闭窗口
                        this.menuDialog.visible = false
                    }
                })
            },
        },
    };
</script>

<style scoped>
  /*.el-table{
    min-height: 300px!important;
  }*/
</style>
